<template>
  <el-card class="pieCard" shadow="always">
    <template #header>
      <div class="header-wrapper color4">
        <div class="title">
          <icon-font icon-class="afl--tubiao"></icon-font>
          LVT {{ $t('mes.dataChartView') }}
        </div>
        <div class="radio-wrapper">
          <el-radio-group v-model="radioSelect" size="small" @change="onCategoryChange">
            <!--<el-radio-button :label="label.pieLabel"></el-radio-button>-->
            <!--<el-radio-button :label="label.lineLabel"></el-radio-button>-->
          </el-radio-group>
        </div>
      </div>
    </template>
    <div class="content-body">
      <v-chart ref="lvtFeedingChart" class="chart" :option="options"></v-chart>
    </div>
  </el-card>
</template>

<script>
import IconFont from '@/components/IconFont/iconFont'
import { computed, onMounted, reactive, ref, watch, watchEffect } from 'vue'
import { useI18n } from 'vue-i18n'

export default {
  name: 'LvtFeedingCharts',
  components: { IconFont },
  props: {
    data: {
      type: Array,
      default: () => []
    }
  },
  setup (props) {
    /* 国际化配置 */
    const { t } = useI18n()
    const label = reactive({
      pieLabel: t('mes.dataSummarization'),
      lineLabel: t('mes.dataTrend')
    })
    const lvtFeedingChart = ref(null)
    const options = ref(null)

    /* 获取总数 */
    const total = computed(() => {
      let sum = null
      if (props.data.length > 0) {
        sum = props.data.map((item) => item.lvtQty).reduce(function (prev, cur, index, arr) {
          return prev + cur
        })
      } else {
        sum = 0
      }
      return sum
    })
    // 声明变量
    const radioSelect = ref(label.pieLabel)
    const onCategoryChange = (type) => {
      radioSelect.value = type
      lvtFeedingChart.value.clear()
      if (type === label.pieLabel) {
        lvtFeedingChart.value.setOption(renderPieOptions())
      } else {
        lvtFeedingChart.value.setOption(renderLineOptions())
      }
    }
    /* 饼状图数据渲染 */
    const renderPieOptions = () => {
      const data = props.data.map((item) => {
        const percent = `${(item.lvtQty / total.value * 100).toFixed(2)}%`
        return { value: item.lvtQty, percent, name: `${item.finishedCode}\n(${item.lvtCode || '其他'} ${percent})` }
      }).sort((a, b) => b.value - a.value)
      return {
        title: [
          {
            text: t('mes.summarizeThePropor'),
            textStyle: {
              fontSize: 18,
              color: '#666'
            },
            right: 30,
            top: 10
          },
          {
            text: t('mes.cumulativeOrder'),
            subtext: total.value + ' pcs',
            x: '34.5%',
            y: '35.5%',
            textStyle: {
              fontSize: 14,
              color: '#999'
            },
            subtextStyle: {
              fontSize: 24,
              color: '#333'
            },
            textAlign: 'center'
          }
        ],
        tooltip: {
          trigger: 'item',
          formatter: '{b} : {c} '
        },
        legend: {
          type: 'scroll',
          orient: 'vertical',
          height: 250,
          left: '70%',
          top: 'middle',
          textStyle: {
            color: '#8c8c8c'
          }
        },
        series: [
          {
            name: 'Traffic Sources',
            type: 'pie',
            center: ['35%', '50%'],
            radius: ['75%', '95%'],
            data: data,
            label: {
              overflow: 'break'
            },
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      }
    }
    /* 折线图数据 */
    const renderLineOptions = () => {
      return {
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            data: [820, 932, 901, 934, 1290, 1330, 1320],
            type: 'line',
            areaStyle: {}
          }
        ]
      }
    }
    onMounted(() => {
      lvtFeedingChart.value.setOption(renderPieOptions())
    })
    watchEffect(() => {
      if (lvtFeedingChart.value && radioSelect.value === label.pieLabel) {
        lvtFeedingChart.value.setOption(renderPieOptions())
      }
    })
    return {
      radioSelect,
      onCategoryChange,
      options,
      total,
      lvtFeedingChart,
      label
    }
  }
}
</script>

<style scoped lang="scss">
.pieCard {
  .header-wrapper {
    //padding: 20px;
    font-size: 16px;
    padding: 10px 0 0px 10px;
    font-weight: bold;
    display: flex;
    flex-direction: row;

    .radio-wrapper {
      flex: 1;
      display: flex;
      justify-content: flex-end;
      padding-right: 20px;
    }
  }

  .content-body {
    height: 180px;
  }
}
</style>
